<script setup>
import {computed,ref} from 'vue'

const props = defineProps(['RegionResult']);

const RegionResult = props.RegionResult || {};
const { head, cod, nh3, tp } = RegionResult;



// Track the index of the selected item in the head array
const selectedHeadIndex = ref(0)



</script>

<template>
  <label for="headSelect">请选择目标水位进行统计:</label>
    <select v-model="selectedHeadIndex"
            style="width: 100px"
    >
      <!-- 使用 v-for 遍历 head 数组 -->
      <option v-for="(item, index) in head"
              :key="index"
              :value="index"
      >
        {{ item }}
      </option>
    </select>m
  <p >COD水环境总量: {{ cod[selectedHeadIndex] }}</p>
  <p >NH3-N水环境总量: {{ nh3[selectedHeadIndex] }}</p>
  <p >TP水环境总量: {{ tp[selectedHeadIndex] }}</p>
</template>
<style scoped>

</style>